<template>
  <div>
    <todo-form
      @on-add-todo="todo => todoDispatch({
        type: actionTypes.ADD_TODO,
        payload: todo
      })"
    ></todo-form>
    <todo-lists
      :todoList="todoList"
      @on-toggle-todo="id => todoDispatch({
        type: actionTypes.TOGGLE_TODO,
        payload: id
      })"
      @on-remove-todo="id => todoDispatch({
        type: actionTypes.REMOVE_TODO,
        payload: id
      })"
    ></todo-lists>
  </div>
</template>

<script>
import TodoForm from './Form';
import TodoLists from './List';
import { useReducer } from '@/hooks';
import { todoReducer, actionTypes, initialTodoList } from './store'

export default {
  name: 'TodoList',
  components: {
    TodoForm,
    TodoLists
  },
  setup() {
    const [ todoList, todoDispatch ] = useReducer(todoReducer, initialTodoList);

    return {
      todoList,
      todoDispatch,
      actionTypes
    }
  }
}
</script>

<style>

</style>